<template>
  <van-tabs
    v-model:active="activeName"
    sticky
    border
    animated
    swipeable
    line-width="1rem"
    title-active-color="#477fc6"
  >
    <van-tab v-for="item in type" :key="item" :title="item" :name="item">
      <post-list :postType="item" :visitor="visitor" />
    </van-tab>
  </van-tabs>
  <van-button
    v-if="!visitor"
    class="add-btn"
    icon="edit"
    type="primary"
    to="/addPost"
  />
</template>

<script>
import { getPostsType } from "@/api/BBSModuleAPI/posts";
import { Tab, Tabs, Button } from "vant";
import PostList from "./PostList.vue";
import { onMounted, computed, ref } from "vue";
import { useRoute } from "vue-router";
export default {
  name: "discover",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    PostList,
  },
  setup() {
    //获取游客标识
    const visitor = JSON.parse(sessionStorage.getItem("visitor"));
    const route = useRoute();
    //当前选中tab页
    let activeName = ref("推荐");
    //帖子类别
    let type = ref([]);

    onMounted(() => {
      getPostsType().then(res => {
        type.value = ["推荐", ...res.type];
      });
    });

    return {
      activeName,
      type,
      visitor,
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.van-tab) {
  font-weight: 500;
}
:deep(.van-tabs__line) {
  background: #4389fc;
}
.add-btn {
  position: fixed;
  right: 20px;
  bottom: 70px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: #1989fa 0 0 6px;
  :deep(.van-button__icon) {
    font-size: 24px;
  }
}
</style>
